<template>
	<view class="parts-detail">
		<!-- top -->
		<view class="parts-detail-top">
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					分类
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.parts_type }}
				</view>
			</view>
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					配件名称
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.parts_name }}
				</view>
			</view>
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					数量
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.number ||0}}
				</view>
			</view>
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					单价
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.parts_price ||0}}
				</view>
			</view>
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					备注
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.remarks }}
				</view>
			</view>
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					总价
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.parts_price_sum }}
				</view>
			</view>
		</view>
		<!-- button组 -->
		<view class="parts-detail-button">
			<u-button class="button-item" color="#2D7FFD" @tap="gotoModify(1)">修改详情</u-button>
			<u-button class="button-item" color="#2D7FFD" @tap="gotoModify(2)">修改库存</u-button>
		</view>
		<!-- 入库出库就tabs -->
		<view class="parts-detail-check-tabs">
			<view class="parts-detail-check-tabs__item" :class="{ active: type === 1 }" @tap="changeType(1)">入库记录</view>
			<view class="parts-detail-check-tabs__item" :class="{ active: type === 0 }" @tap="changeType(0)">出库记录</view>
		</view>
		<!-- 入库出库记录 -->
		<view class="parts-detail-list">
			<u-list @scrolltolower="getList" refresher-background="#F2F4F6" refresher-threshold="50">
				<template v-if="listData.length===0">
					<u-empty text="暂时没有数据" mode="list"></u-empty>
				</template>
				<template v-else>
					<view class="items" v-for="(it,indxx) in listData" :key="indxx">
						<view class="parts-detail-list-item">
							<view class="parts-detail-list-item-left">
								{{type==1?'入':'出'}}库时间
							</view>
							<view class="parts-detail-list-item-right">
								{{it.create_time }}
							</view>
						</view>
						<view class="parts-detail-list-item">
							<view class="parts-detail-list-item-left">
								事件内容
							</view>
							<view class="parts-detail-list-item-right">
								{{it.event_text }}
							</view>
						</view>
						<view class="parts-detail-list-item">
							<view class="parts-detail-list-item-left">
								配件名称
							</view>
							<view class="parts-detail-list-item-right">
								{{it.parts_name }}
							</view>
						</view>
						<view class="parts-detail-list-item">
							<view class="parts-detail-list-item-left">
								数量
							</view>
							<view class="parts-detail-list-item-right">
								{{it.number }}
							</view>
						</view>
						<view class="parts-detail-list-item">
							<view class="parts-detail-list-item-left">
								单价
							</view>
							<view class="parts-detail-list-item-right">
								{{it.parts_price }}
							</view>
						</view>
						<view class="parts-detail-list-item">
							<view class="parts-detail-list-item-left">
								总价
							</view>
							<view class="parts-detail-list-item-right">
								{{it.parts_price_sum }}
							</view>
						</view>
						<view class="parts-detail-list-item">
							<view class="parts-detail-list-item-left">
								备注
							</view>
							<view class="parts-detail-list-item-right">
								{{it.remarks}}
							</view>
						</view>

					</view>
				</template>
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		getPersonPartsDetails,
		getPartsLogList
	} from "@/api"
	export default {
		async onLoad(e) {
			let that = this
			that.params.id = e.id
			await that.getDetail()
			await that.getList()
			uni.$on('getList2', async () => {
				// 操作成功 调取接口
				await that.getDetail()
				await that.changeType(that.type)
				that.type == 1 ? uni.$emit('getList') : null
			})
		},
		beforeDestroy() {
			uni.$off('getList2')
		},
		data() {
			return {
				type: 1,
				listData: [],
				detailInfo: {},
				params: {
					id: 0,
					page: 1,
					limit: 10,
					type: 1
				},
				nextRequest: true,
			}
		},
		methods: {
			gotoModify(type) {
				const typeMap = {
					1: `/subpackage/storehouse/pages/worker/parts/modifyDetails?id=${this.params.id}`,
					2: `/subpackage/storehouse/pages/worker/parts/modifyOrAdd?id=${this.params.id}`,
				}

				this.nav(typeMap[type])
			},
			// 获取详情
			async getDetail(id) {
				try {
					const {
						msg
					} = await getPersonPartsDetails({
						id: this.params.id
					})
					this.detailInfo = msg
					this.$forceUpdate()

				} catch (e) {}
			},
			async getList() {
				let that = this
				try {
					if (!this.nextRequest) return
					let {
						data,
						code
					} = await getPartsLogList(this.params)
					if (code === 1) {
						that.params.page = ++data.current_page
						that.listData = [...data.data, ...this.listData]
						that.listData.length >= data.total ? that.nextRequest = false : null
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			changeType(type) {
				this.type = type
				this.params.type = type
				this.params.page = 1
				this.nextRequest = true
				this.total = null
				this.listData = []
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.parts-detail {
		&-top {
			width: 100%;

			&-item {
				display: flex;
				height: 94rpx;
				line-height: 94rpx;
				border-bottom: 1px solid #C6C6C6;
				font-size: 24rpx;

				&-left {
					width: 33%;
					text-align: center;
					background: #ddd;
					color: #333;
					font-weight: bold;
				}

				&-right {
					padding-left: 40rpx;
					flex: 1;
					overflow-x: scroll;
					color: inherit;
				}
			}

		}

		&-button {
			margin-top: 24rpx;
			display: flex;

			.button-item {
				width: 48%;
			}
		}

		&-check-tabs {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 90rpx;
			// margin: 20rpx;
			background: #fff;
			padding: 40rpx;

			&__item {
				width: 45%;
				border-radius: 10rpx;
				text-align: center;
				color: #666;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				border: 1rpx solid #ddd;

				&.active {
					border: 1rpx solid #1B5BC5;
					background-color: #1B5BC5;
					color: #fff;
				}
			}
		}

		&-list {
			background-color: #efeff4;

			.items {
				margin: 40rpx 0;
			}

			&-item {
				border: 1px solid #C6C6C6;
				display: flex;
				height: 94rpx;
				background-color: #fff;
				font-size: 24rpx;
				line-height: 94rpx;

				&-left {
					width: 33%;
					text-align: center;
					color: #333;
					font-weight: bold;
					border-right: 1px solid #C6C6C6;
				}

				&-right {
					padding-left: 40rpx;
					flex: 1;
					color: inherit;
					overflow-x: scroll;
				}

				&:nth-child(n) {
					border-left: none;
					border-right: none;
					border-bottom: none;
				}

				&:last-child {
					border-bottom: 1px solid #C6C6C6;
				}
			}
		}
	}
</style>